<template>
  <div class="user-wrapper">
    <div class="content-box">
      <el-dropdown @command="handleCommand">
        <span class="el-dropdown-link action">
          {{ nickname() }}
        </span>
        <el-dropdown-menu slot="dropdown">
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item command="logout" divided>
            <span @click="handleLogout">
              <!-- <a-icon type="logout"/> -->
              <span>退出登录</span>
            </span>
          </el-dropdown-item>
        </el-dropdown-menu>
      </el-dropdown>
    </div>
  </div>
</template>

<script>
import { mapActions, mapGetters } from 'vuex'


export default {
  name: 'UserMenu',
  data() {
    return {
    }
  },
  methods: {
    ...mapActions(['Logout']),
    ...mapGetters(['nickname', 'avatar']),
    handleLogout () {
      this.$confirm('真的要注销登录吗 ?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        return this.Logout({}).then(() => {
          window.location.reload()
        }).catch(err => {
          this.$message.error(err.message)
        })
      }).catch(() => {
        return false
      })
    },
    handleCommand (command) {
      switch (command) {
        case 'logout':
          this.handleLogout()
          break;
      
        default:
          break;
      }
    }
  }
}
</script>